<!--观点-->
<template>
  <div class="all bg1" ref="content" @viewappear="viewappear">

    <!--列表-->
    <VTips v-if="!datas.length" 
    text="暂无观点" image="wu.png"
    :width="264" :height="204"></VTips>
    <list class="list">
    
      <!--刷新-->
      <refresh class="refresh" @refresh="httpQueryPoint" :display="isRefresh ? 'show' : 'hide'">
        <loading-indicator class="load text1"></loading-indicator>
      </refresh>

      <!--内容-->
      <cell v-for="(item, index) in datas" v-bind:key="index">
        <!-- 内容 -->
        <VPoint :item="item" 
        @user="userClick" @info="infoClick" 
        @func="funcClick"
        @zhan="httpUnlikeLike" @share="shareClick" />

        <!-- 无更多数据 -->
        <div class="genduo" v-if="pageMax && (index == datas.length - 1)">
          <text class="font22 text3">{{T('没有更多数据')}}</text>
        </div>
      </cell>

      <loading v-if="!pageMax" 
      class="refresh" :display="isLoadinging ? 'show' : 'hide'"
      @loading="httpQueryPointLoading">
        <loading-indicator class="load text1"></loading-indicator>
      </loading>
    </list>


    <!--发布观点-->
    <div v-if="datas" class="fabu main-bt1" @click="fabuClick">
      <LImage class="img-fabu" :src="Config.img('xinhao.png')" />
      <text class="font32 text1">{{T('发布观点')}}</text>
    </div>

    <!--弹出菜单-->
    <div class="func" v-if="showFunc" @click="(showFunc = false)">

      <div class="func-frame" ref="func" :style="{'top':menuTop}">
        <div class="row jend">
          <LImage class="func-jiao" v-if="menuFace" :src="Config.img('function-sanjiao.png')"></LImage>
        </div>
        <div class="func-content bg4">
          <text class="font28 text2 func-text"  v-for="(item, index) in funcs" 
          v-bind:key="index" @click="funcClickx(item)">{{T(item)}}</text>
        </div>
        <div class="row jend">
          <LImage class="func-jiao" v-if="!menuFace" :src="Config.img('function-sanjiaox.png')"></LImage>
        </div>
      </div>
    </div>
  </div>
</template>


<script>

//组件
import VPoint from '@/point/view/VPoint.vue' 
import VTips from '@/_public/VTips.vue';  //标题

//功能
import jhttps from "@/_js/https";
import jconfig from "@/_js/config";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jtime from "@/_js/time";
import jnavigator from "@/_js/navigator";
import jbroadcast from "@/_js/broadcast";

const weexFunction = weex.requireModule("WeexFunction");
const dom = weex.requireModule("dom");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  components: {
    VPoint,
    VTips
  },

  data() {
    return {
      T:T,
      Config:jconfig,

      menuTop: 0, //功能菜单上距离
      menuFace: true, //功能菜单方向：true 向上  false向下
      showFunc:false, //true 显示功能菜单
      funcs:[T('举报')], //功能菜单
      
      pageNo:1, //页码
      pageMax:false, //turn最大页面
      isRefresh:false, //显示刷新
      isLoadinging:false, //显示加载

      expense:'', //费用
      itemMap:undefined, //操作对象
      datas:[],
    };
  },

  created() {

    var time = jtime.getTime(undefined, 'y/M/d');
    var date = jtime.getTimeDate();
    this.time = time + ' ' + date;
    this.httpQueryPoint();
  },

  methods: {

    viewappear() {
    },

    initData(datas) {

      for (let index = 0; index < datas.length; index++) {
        var data = datas[index];

        var timestamp = new Date().getTime();
        var cha = timestamp - data.createTime;
        if (cha < 30000) {
          data.avatar == T('刚刚');
        } else if (cha < 60000) {
          data.avatar == T('1分钟前');
        } else {
          data.time = jtime.getTime(data.createTime, 'y/M/d H:m');
        }
        data.avatar = data.avatar ? data.avatar : jconfig.img('touxiang.png');
      }
      return datas;
    },

    /********************************* HTTP*/
    //http观点-刷新
    httpQueryPoint() {
      if (this.isRefresh || this.isLoadinging) return;
      this.isRefresh = true;

      var param = {'pageNo':1};
      jhttps.post("point/queryPoint",param,true,(data) => {
        this.isRefresh = false;
        if (data.status == 200) {

          data = data.data;
          this.expense  = data.expense;
          this.datas = this.initData(data.list);
          this.pageNo = 1;
          this.pageMax = this.datas.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http观点-加载
    httpQueryPointLoading() {
      if (this.pageMax || this.isRefresh || this.isLoadinging) return;
      this.isLoadinging = true;

      var param = {'pageNo': this.pageNo+1};
      jhttps.post("point/queryPoint",param,true,(data) => {
        this.isLoadinging = false;
        if (data.status == 200) {

          data = data.data;
          var datas = this.initData(data.list);
          this.datas.push(...datas);
          this.pageNo++;
          this.pageMax = datas.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http点赞
    httpUnlikeLike(item) {
      if(!jconfig.forceLogin()) return;

      jmodal.showLoad();
      var param = {'id':Number(item.id)};
      var url = item.isLike == 1 ? 'point/unlike' : 'point/giveALike';
      jhttps.post(url, param,true,(data) => {

        jmodal.hideLoad();
        if (data.status == 200) {

          var isLike = item.isLike == 1 ? 0 : 1;
          var likeNum = isLike == 1 ? jmath.jia(item.likeNum, 1) : jmath.jian(item.likeNum, 1);
          likeNum = likeNum < 0 ? 0 : likeNum;
          item.isLike = isLike;
          item.likeNum = likeNum;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http举报
    httpReport(item, reportReason) {
      jmodal.showLoad();
      var param = {'id': Number(item.id), 'reportReason':reportReason};
      jhttps.post("point/report", param, true,(data) => {
        jmodal.hideLoad();
        if (data.status == 200) {
          jmodal.toast('举报成功');
        } else {
          jmodal.toast(data.msg);
        }
      });
    },
    
    /********************************* 点击*/
    //用户信息
    userClick(item) {

      var param = {'userId':item.userId};
      jnavigator.open('', "follw/UFollwManInfo",param);
      jbroadcast.subscribeOnce('PointUnlike', (map)=>{
        this.datas.forEach((data)=>{
          if (data.id == map.id) {
            data.isLike = map.isLike;
            data.likeNum = map.likeNum;
          }
        })
      })
    },
    
    //详情
    infoClick(item){
      
      var param = {'id':item.id};
      jnavigator.open('', 'point/PointInfo', param);
      jbroadcast.subscribeOnce('PointUnlike', (map)=>{
        item.isLike = map.isLike;
        item.likeNum = map.likeNum;
      })
    },

    //功能
    funcClick(item, event){
      if(!jconfig.forceLogin()) return;

      this.itemMap = item;
      dom.getComponentRect(this.$refs.content, (contentFrame)=>{
        var contentHeight = contentFrame.size.height;
        var funcsHeight = 80 * this.funcs.length + 29;
        var y = event.position.y - 80 + funcsHeight;
        if (y > contentHeight) {
          this.menuFace = false;
          this.menuTop = event.position.y - funcsHeight - 220 + "px";
        } else {
          this.menuFace = true;
          this.menuTop = event.position.y - 120 + "px";
        }
        this.showFunc = true;
      });
    },

    //功能
    funcClickx(item) {

      this.showFunc = false;
      if (item == T('举报')) {

        var parm = {'title':"举报原因", 
                    'placeholder':"请输入举报原因", 
                    'max':30}
        jmodal.prompt(parm, (value)=>{
          if (!value.length) {
            jmodal.toast(T('输入不能为空'));
            return;
          };
          this.httpReport(this.itemMap, value);
        });
      }
    },

    //分享
    shareClick(item) {
      weexFunction.shareApp();
    },

    //发布观点
    fabuClick(){
      if(!jconfig.forceLogin()) return;

      var param = {};
      jnavigator.open('', 'point/Fabu', param);
    }
  },
};

</script>

<style src="@/_css/style.css" ></style>
<style scoped>
/*********************** 列表*/
.list {
  flex-direction: column;
  flex: 1;
}

/*************** 启动*/
.fabu {
  position: absolute;
  bottom: 20px;
  right: 40px;

  flex-direction: row;
  align-items: center;
  justify-content: center;

  height: 84px;
  border-radius: 42px;
  padding-left: 20px;
  padding-right: 20px;
}
.img-fabu {
  width: 34px;
  height: 32px;
  margin-right: 10px;
}
.height104 {
  height: 104px;
}


/*********************************** 功能弹窗*/
.func{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.func-frame {
  position: absolute;
  right: 22;
}
.func-jiao {
  width: 28px;
  height: 20px;
  margin-right: 40px;
}
.func-content {
  border-radius: 16px;
  
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
}
.func-text {
  height: 80px;
  line-height: 80px;
  text-align: center;
}
/*********************** 刷新*/
.refresh {
  width: 750;
  flex-direction: row;
  justify-content: center;
}
.load {
  margin-top: 16px;
  height: 40px;
  width: 40px;
}
.genduo {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}
</style>